@import '~less_base/common';


.fixednumMask {
  position: fixed;
  width: 7.5rem;
  opacity: 0.38;
  top: 0;
  bottom: 0;
  background-color: #000;
  //display: none;
  z-index: 999;
}

.fixednumMain {
  position: fixed;
  bottom: 0px;
  left: auto;
  width: 7.5rem;
  z-index: 1199;
  background: #F0F0F0;
  transform: translateX(0);
  .needBottomFit & {
      padding-bottom: 34px;
  }
}

.fixednumMain .tipBanner {
  height: 42px;
  width: 100%;
  background: #F0F0F0;
  border-top: 1px solid #cacaca;
  font-size: 16px;
}

.fixednumMain .tipBanner span.title,
.fixednumMain .priceBanner span.title {
  line-height: 42px;
  float: left;
  text-indent: 10px;
  min-width: 65px;
}

.fixednumMain .tipBanner .last,
.fixednumMain .priceBanner .editTxt {
  float: left;
  //width: 60%;
  padding-right: 0.1rem;
  height: 30px;
  line-height: 30px;
  margin: 6px 0;
  color: #169ADA;
  text-indent: 0.08rem;
  overflow: hidden;
  font-size: 20px;
  font-family: "Helvetica neue", Verdana, Geneva, sans-serif;
}
.fixednumMain .priceBanner .editTxt {
  width: 60%;
}

.fixednumMain .tipBanner .close {
  float: right;
  width: 16px;
  height: 16px;
  padding: 13px;
  background-image: url("@{CDNURL}/res/img/close.png");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 16px;
}

.fixednumMain .tipBanner .finish{
  float:right;
  width:42px;
  height:42px;
  background-size:30px;
  line-height:40px;
  font-size:16px;
  color:#007aff;
}

.fixednumMain .priceBanner {
  background: #fff;
  height: 42px;
  line-height: 42px;
  font-size: 16px;
  width: 100%;
  position: relative;
}

.fixednumMain .priceBanner .editTxt .hover {
    @keyframes anime {
        45% {
            opacity: 1;
        }
        50% {
            opacity: 0;
        }
        100% {
            opacity: 0;
        }
    }
  position: relative;
  display: inline-block;
  vertical-align: middle;
  text-indent: 0;
  &:before {
    content: '';
    width: 2px;
    height: 18px;
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    background-color: #576B95;
    animation: anime 1s linear infinite;
  }
  &.valid {
    padding-right: .1rem;
  }
  &.placeholder {
      font-weight: normal;
      color: #ccc;
      border-right: none;
      font-size: 16px;
      position: relative;
      padding-left: 4px;
      &:before {
          left: 0;
      }
  }
}

.fixednumMain .priceBanner .tips {
  color: #999;
  font-size: 14px;
  margin-right: 10px;
  overflow: hidden;
  height: 42px;
  position: absolute;
  right: 0;
  top: 0
}

.fixednumMain .priceBanner .tips .clearPrice {
  width: 20px;
  height: 42px;
  background-image: url("@{CDNURL}/res/img/clearPrice.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 16px;
}

.fixednumMain .btnBanner {
  margin: 0 auto;
  width: 96%;
  padding: 10px 0;
  display: table;
}

.fixednumMain .btnBanner .confirmBtn,
.fixednumMain .btnBanner .fixedPrice,
.fixednumMain .btnBanner .changePrice {
  background: #F55F12;
  padding: 2.5% 0;
  border-radius: 4px;
  width: 66%;
  text-align: center;
  font-size: 18px;
  color: #fff;
  border: none;
  float: left;
  height: 24px;
  line-height: 24px;
}

.fixednumMain .btnBanner .fixedPrice,
.fixednumMain .btnBanner .changePrice {
  background: #F68134;
  width: 32%;
  float: left;
  margin-right: 2%;
  font-size: 14px;
  height: 24px;
  line-height: 24px;
}
.fixednumMain .btnBanner .fixedPrice {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    color: #FCDDC8;
    font-size: 12px;
    line-height: 1;
    >div {
        font-size: 16px;
        color: #fff;
        padding-bottom: 4px;
        span {
            color: currentColor;
            font-size: 12px;
        }
    }
}

.fixednumMain .btnBanner .changePrice.sub {
  background: #06BC07;
  width: 15%;
  margin-right: 2%;
  margin-left: 0;
  background-image: url("@{CDNURL}/res/img/subIcon.png");
  background-size: 20px;
  background-position: center;
  background-repeat: no-repeat;
}

.fixednumMain .btnBanner .changePrice.add {
  background: #06BC07;
  width: 15%;
  margin-right: 0;
  margin-left: 2%;
  background-image: url("@{CDNURL}/res/img/addIcon.png");
  background-size: 20px;
  background-position: center;
  background-repeat: no-repeat;
}

.fixednumMain .btnBanner .confirmBtn:only-child{
  padding: 10px 0;
  width: 100%;
}

.fixednumMain .agreeBanner {
  margin: 0 auto;
  width: 96%;
  padding-bottom: 8px;
  font-size: 12px;
  text-align: right;
  color: #878787;
  display: table;
}

.fixednumMain .numkey {
  width: 100%;
  background: #fff;
  display: table;
}

.fixednumMain .numkey ul {
  padding: 0;
  margin: 0;
}

.fixednumMain .numkey ul,
.fixednumMain .numkey li {
  text-decoration: none;
  list-style: none;
  vertical-align: middle;
}

.fixednumMain .numkey ul li {
  position: relative;
  width: 33.1%;
  border-bottom: 1px solid #b3b3b3;
  border-right: 1px solid #b3b3b3;
  height: 50px;
  max-height: 60px;
  float: left;
  font-size: 28px;
  font-family: "Helvetica neue", Verdana, Geneva, sans-serif;
  text-align: center;
  background: #fff;
  line-height: 1;
}

.fixednumMain .numkey ul li:nth-child(3n) {
  border-right: none;
}

.fixednumMain .numkey ul li.delete {
  background-image: url("@{CDNURL}/res/img/backspace.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 30px;
  background-color: #D1D5DA;
}

.fixednumMain .numkey ul li.othernum {
  background-color: #D1D5DA;
  line-height: 50px;

}

.fixednumMain .numkey ul li .number {
  padding-top: 7.5px;
  color: #000;
}

.fixednumMain .numkey ul li .letter {
  font-size: 12px;
  color: #000;
  padding-bottom: 7.5px;
}
